import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { 
  Building, 
  Users, 
  Phone, 
  Edit, 
  Trash2,
  FolderOpen,
  Hammer,
  Eye,
  Settings
} from "lucide-react";

export default function OperationalUnitCard({ unit, onEdit, onDelete }) {
  const getUnitTypeConfig = (type) => {
    const configs = {
      constructionUnit: { 
        color: "bg-blue-100 text-blue-700", 
        icon: <Hammer className="w-4 h-4" />,
        label: "施工单位" 
      },
      designUnit: { 
        color: "bg-green-100 text-green-700", 
        icon: <Eye className="w-4 h-4" />,
        label: "设计单位" 
      },
      supervisionUnit: { 
        color: "bg-purple-100 text-purple-700", 
        icon: <Settings className="w-4 h-4" />,
        label: "监理单位" 
      }
    };
    return configs[type] || configs.constructionUnit;
  };

  const typeConfig = getUnitTypeConfig(unit.type);

  return (
    <Card className="hover:shadow-lg transition-shadow duration-300">
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <CardTitle className="text-lg font-semibold text-gray-900 mb-2">
              {unit.name}
            </CardTitle>
            <Badge className={`${typeConfig.color} flex items-center gap-1 w-fit`}>
              {typeConfig.icon}
              {typeConfig.label}
            </Badge>
          </div>
          <div className="flex gap-1">
            <Button
              variant="ghost"
              size="icon"
              onClick={() => onEdit(unit)}
              className="h-8 w-8 text-gray-400 hover:text-gray-600"
            >
              <Edit className="w-4 h-4" />
            </Button>
            <Button
              variant="ghost"
              size="icon"
              onClick={() => onDelete(unit.id)}
              className="h-8 w-8 text-gray-400 hover:text-red-600"
            >
              <Trash2 className="w-4 h-4" />
            </Button>
          </div>
        </div>
      </CardHeader>

      <CardContent className="pt-0">
        <div className="space-y-3">
          {/* Resource Capacity */}
          {unit.resource_capacity && (
            <div className="space-y-2">
              <h4 className="text-sm font-medium text-gray-700 flex items-center gap-2">
                <Users className="w-4 h-4" />
                资源承载能力
              </h4>
              <div className="bg-gray-50 p-3 rounded-md space-y-2">
                {unit.resource_capacity.max_concurrent_teams && (
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">最大并行施工队：</span>
                    <span className="font-medium">{unit.resource_capacity.max_concurrent_teams} 队</span>
                  </div>
                )}
                {unit.resource_capacity.max_projects && (
                  <div className="flex justify-between text-sm">
                    <span className="text-gray-600">最大管理项目：</span>
                    <span className="font-medium">{unit.resource_capacity.max_projects} 个</span>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Contact Info */}
          {(unit.contact_person || unit.contact_phone) && (
            <div className="pt-2 border-t">
              <h4 className="text-sm font-medium text-gray-700 mb-2">联系方式</h4>
              <div className="space-y-1">
                {unit.contact_person && (
                  <div className="flex items-center text-sm text-gray-600">
                    <Building className="w-4 h-4 mr-2" />
                    <span>{unit.contact_person}</span>
                  </div>
                )}
                {unit.contact_phone && (
                  <div className="flex items-center text-sm text-gray-600">
                    <Phone className="w-4 h-4 mr-2" />
                    <span>{unit.contact_phone}</span>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}